import { useState } from 'react';
import clsx from 'clsx';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Divider from '@mui/material/Divider';
import { NoteIcon, PhoneIcon } from '@/compnents/icons';
import { SignIn, NoteEditor } from '@/compnents';
import { DanmakuKit } from '@/platform/pc/components';
import { Popover, type ISMap } from '@/compnents';
import logo from '/logo@256x256.png';
import './index.less';

type IMenuProps = {
  map: ISMap;
};

const prefixCls = 'smap-menu';

export const Menu = (props: IMenuProps) => {
  const { map } = props;
  const [hide, setHide] = useState<boolean>();
  const [noteEditorOpen, setNoteEditorOpen] = useState<boolean>();
  const [singInOpen, setSignInOpen] = useState<boolean>();

  const onHotClick = () => setHide(!hide);

  const onNoteClick = () => {
    setNoteEditorOpen(true);
  };

  const onSignIn = () => {
    setSignInOpen(true);
  };

  return (
    <>
      <div className={clsx(prefixCls, { hide })}>
        <div className={`${prefixCls}-hot`} onClick={onHotClick}>
          <div className="hot-line1" />
          <div className="hot-line2" />
        </div>
        <div className={`${prefixCls}-logo`}>
          <img src={logo} />
        </div>
        <Divider style={{ width: '100%', margin: '12px 0' }} />
        <Tooltip arrow placement="right" title="笔记">
          <IconButton onClick={onNoteClick} className={clsx(`${prefixCls}-note`, `${prefixCls}-item`)}>
            <NoteIcon />
          </IconButton>
        </Tooltip>
        <Tooltip arrow placement="right" title="弹幕">
          <IconButton className={clsx(`${prefixCls}-danmaku`, `${prefixCls}-item`)}>
            <DanmakuKit map={map} />
          </IconButton>
        </Tooltip>
        <Divider style={{ width: '100%', margin: '12px 0' }} />

        <div className={`${prefixCls}-sign-in`} onClick={onSignIn}>
          登录
        </div>
        <Popover
          content={
            <div>
              <div style={{ height: 30 }}></div>扫码下载
              <br />
              地图笔记
            </div>
          }
        >
          <div className={`${prefixCls}-phone`}>
            <PhoneIcon />
          </div>
        </Popover>
      </div>
      <SignIn open={singInOpen} onOpenChange={setSignInOpen} />
      <NoteEditor map={map} open={noteEditorOpen} onOpenChange={setNoteEditorOpen} />
    </>
  );
};
